*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: a;
  src: url(./jost-variable.ttf);
}
@font-face {
  font-family: kajiro;
  src: url(./Kajiro-Bold.woff2);
}

main{
  width: 100VW;
  height: 100vh;
}
.back1{
  height: 100vh;
  width: 100%;
}
#back1 img{
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
#top {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
#workingarea{
  width: 100%;
  height: 100vh;
  position: relative;
  max-width: 1920px;
}
#hero{
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  left: 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

#heroleft{
  width: 50%;
  min-width: 50%;
}
#heroleft .elem{
  position: relative;
  height: 9vw;
  overflow: hidden ;
}
#heroleft .elem h1:nth-child(1){
  top: 0;
}
#heroleft .elem h1{ 
  top: 100%;
  left: 0;
  position: absolute;
  line-height: .9;
  font-family: "Simpel Medium";
    color: rgb(255, 255, 255);
    font-weight: 100; 
   font-size: 7vw;  
}
#heroleft button{
  padding-top: 1.5vw;  
  padding-bottom: 1.5vw;
  padding-left: 2vw;
  padding-right: 2vw;
  color: aliceblue;
  background-color: rgb(179, 172, 172);
  font-weight: 100; 
  font-size: 3vw; 
  margin-left: .5vw;
  border: 2px solid black;
  font-family: "Simpel Medium";
  margin-top: .5vw;
  pointer-events: all;
}
#heroright{
  width: 25%;
}

#about-descr h1{
  color:black
}
#about-descr .separator{
  font-family: "Playfair Display";
  color: #2e2c2c;
  font-size: 25px;
  font-weight: 100;
  float: left;
  line-height: 1.3;
}
  /* Responsive */